<template>
  <div class="app-container">
    <el-form>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="104px" label="检查目标:" class="postInfo-container-item">
            <el-select v-model="targetVal" placeholder="检查目标" clearable>
              <el-option
                v-for="(item,index) in ddlTarget"
                :key="index"
                :label="item.text"
                :value="item.value"
                :selected="item.selected"
                :disabled="!item.canSelect"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="104px" label="被检查企业:" class="postInfo-container-item">
            <el-select v-model="companyVal" placeholder="被检查企业" clearable>
              <el-option
                v-for="(item,index) in ddlCompany"
                :key="index"
                :label="item.text"
                :value="item.value"
                :selected="item.selected"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="104px" class="postInfo-container-item" label="任务名称:">
            <el-input v-model="listQuery.taskName" placeholder="任务名称"></el-input>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="8">
          <el-form-item label-width="104px" class="postInfo-container-item" label="任务负责人:">
            <el-input v-model="listQuery.taskName" placeholder="任务负责人"></el-input>
          </el-form-item>
        </el-col>-->
        <el-col :span="8">
          <el-form-item label-width="104px" label="任务状态:" class="postInfo-container-item">
            <el-select v-model="executeStateVal" placeholder="任务状态" clearable>
              <el-option
                v-for="(item,index) in ddlExecuteState"
                :key="index"
                :label="item.text"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="104px" class="postInfo-container-item" label="开始时间:">
            <el-date-picker
              type="date"
              value-format="yyyy/MM/dd"
              v-model="listQuery.startDate"
              placeholder="开始时间"
              style="width:140px"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label-width="104px" class="postInfo-container-item" label="完成时间:">
            <el-date-picker
              type="date"
              v-model="listQuery.overDate"
              value-format="yyyy/MM/dd"
              placeholder="完成时间"
              style="width:140px"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      :style="{width: '100%'}"
    >
      <el-table-column align="center" label="编号" min-width="80" :height="height">
        <template slot-scope="scope">
          <span>{{ scope.row.taskId }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="200px" align="center" label="计划名称">
        <template slot-scope="{row}">
          <!-- <router-link
            :to="'/message/edit/'+row.planId"
            class="link-type"
            style="width:178px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
            :title="row.planName"
          >-->
          <span>{{ row.planName }}</span>
          <!-- </router-link> -->
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="检查目标">
        <template slot-scope="scope">
          <span>{{ scope.row.targetName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" align="center" label="任务名称">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="150px" align="center" label="被检查企业">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" align="center" label="任务负责人">
        <template slot-scope="scope">
          <span>{{ scope.row.executorName }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="开始时间" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.startDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="结束时间" min-width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.overDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="90px" align="center" label="计划状态">
        <template slot-scope="scope">
          <span>{{ scope.row.planStateName }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="90px" align="center" label="任务状态">
        <template slot-scope="scope">
          <span>{{ scope.row.taskStateName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="150px" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button-group> -->
          <el-button
            type="success"
            size="small"
            @click="startCheck(scope.row.taskId)"
            v-if="scope.row.taskState== 2"
            style="width:100px;margin-left:10px"
            icon="el-icon-edit"
          >开始检查</el-button>
          <el-button
            type="success"
            size="small"
            v-if="scope.row.taskState==3 && scope.row.existCheckResult==0"
            @click="checkFormSave(scope.row.taskId)"
            style="width:100px;margin-left:10px"
            icon="el-icon-edit"
          >检查表</el-button>
          <el-button
            type="primary"
            size="small"
            style="width:100px;margin-left:10px"
            @click="seeDetail(scope.row.taskId)"
            icon="el-icon-view"
          >查看</el-button>
          <!-- <router-link :to="'/danger/troubleAdd'"> -->
          <el-button
            type="warning"
            size="small"
            style="width:100px"
            v-if="scope.row.taskState != 99&&scope.row.taskState != 1&&scope.row.taskState != 2"
            @click="addTrouble(scope.row.taskId,scope.row.companyId)"
            icon="el-icon-edit"
          >隐患登记</el-button>
          <!-- </router-link> -->
          <el-button
            type="info"
            size="small"
            style="width:100px"
            v-if="scope.row.taskState != 99&&scope.row.taskState != 1&&scope.row.taskState != 2"
            @click="caogaoInfoOver(scope.row.taskId)"
            icon="el-icon-check"
          >结束检查</el-button>
          <!-- </el-button-group> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
    <el-dialog :visible.sync="dialogAddTroubleVisible" title="隐患登记">
      <troubleAdd
        :taskId="currentTaskId"
        :companyId="currentCompanyId"
        @closeDialog="dialogAddTroubleVisible=false"
      ></troubleAdd>
    </el-dialog>
    <el-dialog :visible.sync="dialogBeginCheckVisible" title="开始检查">
      <el-form class="form-container" :rules="beginCheckInfoRules" :model="beginCheckInfo">
        <div class="createPost-main-container">
          <el-row>
            <el-col :span="24">
              <div class="postInfo-container">
                <fieldset class="fieldInfo">
                  <legend>
                    <span>基本信息</span>
                  </legend>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="计划名称:"
                        class="postInfo-container-item"
                      >{{this.beginCheckInfo.planName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="任务名称:"
                        class="postInfo-container-item"
                      >{{this.beginCheckInfo.taskName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="被检查企业:"
                        class="postInfo-container-item"
                      >{{this.beginCheckInfo.companyName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="检查目标:"
                        class="postInfo-container-item"
                      >{{this.beginCheckInfo.targetName}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="检查表名称:"
                        class="postInfo-container-item"
                      >{{this.beginCheckInfo.checkPaperName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="任务负责人:"
                        class="postInfo-container-item"
                      >{{this.beginCheckInfo.executorName}}</el-form-item>
                    </el-col>
                  </el-row>
                </fieldset>
                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label-width="150px"
                      label="专家:"
                      class="postInfo-container-item"
                      prop="persons"
                    >
                      <el-input
                        v-model="beginCheckInfo.persons"
                        placeholder="请输入专家名称"
                        style="width:200px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label-width="150px" label="企业人员:" class="postInfo-container-item">
                      <el-input
                        v-model="beginCheckInfo.startCompanyPersons"
                        placeholder="请输入企业人员名称"
                        style="width:200px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item
                      label-width="150px"
                      label="检查实际开始时间:"
                      class="postInfo-container-item"
                      prop="realStartDate"
                    >
                      <el-date-picker
                        value-format="yyyy/MM/dd"
                        v-model="beginCheckInfo.realStartDate"
                        type="date"
                        placeholder="请输入检查实际开始时间"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="text-align:right;">
          <el-button type="danger" @click="dialogBeginCheckVisible=false">取消</el-button>
          <el-button type="primary" @click="saveBeginCheckInfo()">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogEndCheckVisible" title="结束检查">
      <el-form
        class="form-container"
        ref="endCheckInfo"
        :rules="endCheckInfoRules"
        :model="endCheckInfo"
      >
        <div class="createPost-main-container">
          <el-row>
            <el-col :span="24">
              <div class="postInfo-container">
                <fieldset class="fieldInfo">
                  <legend>
                    <span>基本信息</span>
                  </legend>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="计划名称:"
                        class="postInfo-container-item"
                      >{{this.endCheckInfo.planName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="任务名称:"
                        class="postInfo-container-item"
                      >{{this.endCheckInfo.taskName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="被检查企业:"
                        class="postInfo-container-item"
                      >{{this.endCheckInfo.companyName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="检查目标:"
                        class="postInfo-container-item"
                      >{{this.endCheckInfo.targetName}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="检查表名称:"
                        class="postInfo-container-item"
                      >{{this.endCheckInfo.checkPaperName}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label-width="150px"
                        label="任务负责人:"
                        class="postInfo-container-item"
                      >{{this.endCheckInfo.executorName}}</el-form-item>
                    </el-col>
                  </el-row>
                </fieldset>
                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label-width="150px"
                      label="专家:"
                      class="postInfo-container-item"
                      prop="overPersons"
                    >
                      <el-input
                        v-model="endCheckInfo.overPersons"
                        placeholder="请输入专家名称"
                        style="width:200px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label-width="150px" label="企业人员:" class="postInfo-container-item">
                      <el-input
                        v-model="endCheckInfo.overCompanyPersons"
                        placeholder="请输入企业人员名称"
                        style="width:200px"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item
                      label-width="150px"
                      label="检查实际结束时间:"
                      class="postInfo-container-item"
                      prop="realOverDate"
                    >
                      <el-date-picker
                        v-model="endCheckInfo.realOverDate"
                        type="date"
                        value-format="yyyy/MM/dd"
                        placeholder="请输入检查实际结束时间"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label-width="150px"
                      label="检查结论:"
                      class="postInfo-container-item"
                      prop="taskOpinion"
                    >
                      <el-input
                        v-model="endCheckInfo.taskOpinion"
                        placeholder="请输入检查结论"
                        show-word-limit
                        :maxlength="500"
                        :autosize="{ minRows: 4, maxRows: 7 }"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label-width="150px" label="检查附件:" class="postInfo-container-item">
                      <el-upload
                        class="upload-demo"
                        action="#"
                        :on-remove="handleRemove"
                        :http-request="httpRequest"
                      >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">上传文件，且不超过5MB</div> -->
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="text-align:right;">
          <el-button type="danger" @click="dialogEndCheckVisible=false">取消</el-button>
          <el-button type="primary" @click="saveEndCheckInfo">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" title="使用检查表检查" style="padding:0px 20px">
      <fieldset class="fieldInfo">
        <legend>
          <span>基本信息</span>
        </legend>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">检查目标：</span>
              {{treeDataList.targetName}}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">计划名称：</span>
              {{treeDataList.planName}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">被检查企业：</span>
              {{treeDataList.companyName}}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">任务名称：</span>
              {{treeDataList.taskName}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">检查表名称：</span>
              {{treeDataList.checkPaperName}}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">任务负责人：</span>
              {{treeDataList.executorName}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="display:flex">
              <span style="font-weight: bold;font-size: 14px; width:50px">专家：</span>
              <el-input
                v-model="saveList.persons"
                :readonly="primaryShwo"
                placeholder="请输入专家名称"
                style="width:150px"
              ></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark" style="display:flex">
              <span style="font-weight: bold;font-size: 14px; width:80px">企业人员：</span>
              <el-input
                v-model="saveList.companyPersons"
                :readonly="primaryShwo"
                placeholder="输入企业人员，多人使用半角逗号分隔"
                style="width:270px"
              ></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="display:flex">
              <span style="font-weight: bold;font-size: 14px;width:80px">检查时间：</span>
              <el-date-picker
                v-model="saveList.checkDateTime"
                type="datetime"
                value-format="yyyy/MM/dd HH:mm:ss"
                :readonly="primaryShwo"
                placeholder="请输入检查时间"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="primaryShwo">
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <span style="font-weight: bold;font-size: 14px;">检查结果：</span>
              {{treeDataList.result == 1 ?"合格":"不合格"}}
            </div>
            <!-- <div v-if="treeDataList.result == 1" class="grid-content bg-purple-dark">检查结果：合格</div>
            <div v-if="treeDataList.result == 2" class="grid-content bg-purple-dark">检查结果：不合格</div>-->
          </el-col>
        </el-row>
      </fieldset>
      <div style="overflow: scroll;height: 450px;">
        <div v-for="(item,index) in treeDataList.treeData" :key="index" class="treeDataL">
          <el-row>
            <el-col :span="24">
              <div
                class="grid-content bg-purple-dark"
                :style="item.leaf?'padding-left:30px':''"
              >{{item.indicatorContent}}</div>
            </el-col>
          </el-row>
          <el-row v-if="item.leaf" :style="item.leaf?'padding-left:30px':''">
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-checkbox
                  @change="chooseSelected(item,1)"
                  :disabled="primaryShwo"
                  v-model="item.items[0].selected"
                >{{item.items[0].text}}</el-checkbox>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <el-checkbox
                  @change="chooseSelected(item,0)"
                  :disabled="primaryShwo"
                  v-model="item.items[1].selected"
                >{{item.items[1].text}}</el-checkbox>
              </div>
            </el-col>
            <el-col :span="14">
              <div class="grid-content bg-purple">
                <el-input
                  v-if="item.items[1].selected"
                  type="textarea"
                  :rows="1"
                  :readonly="primaryShwo"
                  placeholder="问题描述"
                  v-model="item.checkComment"
                ></el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div slot="footer" v-if="!primaryShwo" class="dialog-footer" style="    text-align: center;">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sbumit">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormWatchVisible" title="任务详情" v-if="this.taskDetailData">
      <el-tabs value="1">
        <el-tab-pane
          v-if="taskDetailData.planTabData"
          label="计划信息"
          name="1"
          style="overflow: scroll;height: 450px;"
        >
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查目标：</span>
                {{taskDetailData.planTabData.targetName}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">计划名称：</span>
                {{taskDetailData.planTabData.planName}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">被检查企业：</span>
                {{taskDetailData.planTabData.companyName}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">任务名称：</span>
                {{taskDetailData.planTabData.taskName}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">任务负责人：</span>
                {{taskDetailData.planTabData.executorName}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">企业安全负责人：</span>
                {{taskDetailData.planTabData.safetyOfficerName||'暂无'}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">联系电话：</span>
                {{taskDetailData.planTabData.mobile||'暂无'}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">计划开始检查时间：</span>
                {{taskDetailData.planTabData.startDate}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">计划结束检查时间：</span>
                {{taskDetailData.planTabData.overDate}}
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          v-if="taskDetailData.startTabData"
          label="开始检查"
          name="2"
          style="overflow: scroll;height: 450px;"
        >
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查目标：</span>
                {{taskDetailData.planTabData.targetName}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">计划名称：</span>
                {{taskDetailData.planTabData.planName}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查企业：</span>
                {{taskDetailData.planTabData.companyName}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">任务名称：</span>
                {{taskDetailData.planTabData.taskName}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">专家：</span>
                {{taskDetailData.startTabData.persons}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">企业人员：</span>
                {{taskDetailData.startTabData.startCompanyPersons}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">实际开始检查时间：</span>
                {{taskDetailData.startTabData.realStartDate}}
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane
          v-if="taskDetailData.dangerTabData&&taskDetailData.dangerTabData.length>0"
          label="隐患情况"
          name="3"
          style="overflow: scroll;height: 450px;"
        >
          <el-table :data="taskDetailData.dangerTabData" style="width: 100%">
            <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
            <el-table-column prop="companyName" label="企业名称" min-width="200" align="center"></el-table-column>
            <el-table-column prop="dangerName" label="隐患名称" min-width="200" align="center"></el-table-column>
            <el-table-column prop="strDangerLevel" label="隐患级别" align="center" min-width="100"></el-table-column>
            <el-table-column
              prop="strdangerRecitfyType"
              label="整改类型"
              align="center"
              min-width="100"
            ></el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane
          v-if="taskDetailData.paperTabData&&JSON.stringify(taskDetailData.paperTabData) != '{}'"
          label="检查表检查结果"
          name="4"
          style="overflow: scroll;height: 450px;"
        >
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查表名称：</span>
                {{taskDetailData.paperTabData.checkPaperName}}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">专家：</span>
                {{taskDetailData.paperTabData.persons}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">企业人员：</span>
                {{taskDetailData.paperTabData.companyPersons}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查结果：</span>
                {{taskDetailData.paperTabData.resultName}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查时间：</span>
                {{taskDetailData.paperTabData.checkDateTime}}
              </div>
            </el-col>
          </el-row>
          <div
            v-for="(item,index) in taskDetailData.paperTabData.treeData"
            :key="index"
            class="treeDataL"
          >
            <el-row>
              <el-col :span="24">
                <div
                  class="grid-content bg-purple-dark"
                  :style="item.leaf?'padding-left:30px':''"
                >{{item.indicatorContent}}</div>
              </el-col>
            </el-row>
            <el-row v-if="item.leaf" :style="item.leaf?'padding-left:30px':''">
              <el-col :span="5">
                <div class="grid-content bg-purple">
                  <el-checkbox
                    @change="chooseSelected(item,1)"
                    :disabled="primaryShwo"
                    v-model="item.items[0].selected"
                  >{{item.items[0].text}}</el-checkbox>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple-light">
                  <el-checkbox
                    @change="chooseSelected(item,0)"
                    :disabled="primaryShwo"
                    v-model="item.items[1].selected"
                  >{{item.items[1].text}}</el-checkbox>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="grid-content bg-purple">
                  <el-input
                    v-if="item.items[1].selected"
                    type="textarea"
                    :rows="1"
                    :readonly="primaryShwo"
                    placeholder="问题描述"
                    v-model="item.checkComment"
                  ></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane
          v-if="taskDetailData.endTabData&&JSON.stringify(taskDetailData.endTabData) != '{}'"
          label="结束检查"
          name="5"
          style="overflow: scroll;height: 450px;"
        >
          <el-row v-if="primaryShwo">
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">专家：</span>
                {{taskDetailData.endTabData.overPersons}}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">企业人员：</span>
                {{taskDetailData.endTabData.overCompanyPersons}}
              </div>
            </el-col>
          </el-row>
          <el-row v-if="primaryShwo">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查实际结束时间：</span>
                {{taskDetailData.endTabData.realOverDate}}
              </div>
            </el-col>
          </el-row>
          <el-row v-if="primaryShwo">
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <span style="font-weight: bold;font-size: 14px;">检查结论：</span>
                {{taskDetailData.endTabData.taskOpinion}}
              </div>
            </el-col>
          </el-row>
          <template v-if="taskDetailData.endTabData.appendixList">
            <el-table :data="taskDetailData.endTabData.appendixList" style="width: 100%">
              <el-table-column type="index" label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="附件名称" min-width="150" align="center"></el-table-column>
              <!-- <el-table-column prop="businessType" label="附件类型" align="center"></el-table-column> -->
              <el-table-column label="操作" align="center" min-width="150">
                <template slot-scope="scope">
                  <a :href="'/api'+scope.row.url">
                    <el-button type="info" size="small" icon="el-icon-view">下载</el-button>
                  </a>
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-view"
                    @click="watchPic('/api'+scope.row.url)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>

        <!-- <div slot="footer" v-if="!primaryShwo" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sbumit">提交</el-button>
        </div>-->
      </el-tabs>
    </el-dialog>
    <el-dialog :visible.sync="dialogCaogaoInfoVisible" title="是否有草稿隐患">
      <el-form class="form-container" ref="caogaoInfo" :model="caogaoInfo">
        <div class="createPost-main-container">
          <el-row>
            <el-col :span="24">
              <div class="postInfo-container">
                <fieldset class="fieldInfo">
                  <legend>
                    <span>任务隐患信息</span>
                  </legend>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item
                        label-width="170px"
                        label="此任务已登记隐患数:"
                        class="postInfo-container-item"
                      >{{this.caogaoInfo.totleCount}}</el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        label-width="170px"
                        label="此任务已有草稿数:"
                        class="postInfo-container-item"
                      >{{this.caogaoInfo.draftCount}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <router-link :to="'/danger/trouble?taskId='+this.currentTaskId">
                        <el-button size="small" icon="el-icon-edit" type="primary">查看</el-button>
                      </router-link>
                    </el-col>
                  </el-row>
                </fieldset>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="text-align:right;">
          <el-button type="danger" @click="dialogCaogaoInfoVisible=false">取消</el-button>
          <el-button type="primary" @click="gotoCheck">结束检查</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchTaskList,
  beginCheckInfo,
  endCheckInfo,
  fetchTaskCheckForm,
  fetchSave,
  saveBeginCheck,
  saveEndCheck,
  fetchDetails,
  fetchDangerInfoBeforeDoTaskEnd
} from '@/api/task'
import troubleAdd from '@/views/danger/trouble/troubleAdd'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import moment from 'moment'
export default {
  name: 'TaskList',
  components: { Pagination, troubleAdd },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialogCaogaoInfoVisible: false,
      currentTaskId: '',
      currentCompanyId: '',
      list: null,
      total: 0,
      title: '',
      checkTitle: '',
      listLoading: true,
      height: window.innerHeight + 'px',
      listQuery: {
        companyId: 0, //检查企业
        executorId: 0, //检查负责人
        limit: 10,
        overDate: '', //计划结束时间
        pageIndex: 1,
        startDate: '', //计划开始时间
        targetId: 0, //检查对象
        taskName: '', //任务名称
        taskState: 0 //任务状态
      },
      query: {
        planName: '', //计划名称
        target: '', //目标
        unit: '', //单位
        state: '' //任务状态
      },
      //开始检查时的检查基本信息
      beginCheckInfo: {
        targetName: '主要负责人履职情况',
        checkPaperId: 2,
        checkPaperName: '主要负责人履职情况检查用表1',
        targetId: 108,
        executorId: 1,
        companyName: '测试企业1',
        planName: '计划1',
        companyId: 1,
        executorName: '系统管理员',
        taskName: '计划1企业1安全检查',
        planId: 1,
        taskId: 1,
        persons: '', //开始检查的专家
        startCompanyPersons: '', //开始检查的企业人员
        realStartDate: moment().format('YYYY/MM/DD') //开始检查时间
      },
      //结束检查时的检查基本信息
      endCheckInfo: {
        targetName: '主要负责人履职情况',
        checkPaperId: 2,
        checkPaperName: '主要负责人履职情况检查用表1',
        targetId: 108,
        executorId: 1,
        companyName: '测试企业1',
        planName: '计划1',
        companyId: 1,
        executorName: '系统管理员',
        taskName: '计划1企业1安全检查',
        planId: 1,
        taskId: 1,
        overPersons: '',
        overCompanyPersons: '',
        taskOpinion: '', //检查总结
        realOverDate: new Date(), //结束检查时间
        fileList: []
      },
      beginCheckInfoRules: {
        // persons: [{ required: true, message: '专家不能为空', trigger: 'blur' }],
        realStartDate: [
          { required: true, message: '开始检查时间不能为空', trigger: 'blur' }
        ]
      },
      endCheckInfoRules: {
        // overPersons: [
        //   { required: true, message: '专家不能为空', trigger: 'blur' }
        // ],
        realOverDate: [
          { required: true, message: '结束检查时间不能为空', trigger: 'blur' }
        ],
        taskOpinion: [
          { required: true, message: '检查总结不能为空', trigger: 'blur' }
        ]
      },
      //检查表保存信息
      saveList: {
        checkDateTime: moment().format('YYYY/MM/DD HH:mm:ss'), //检查时间
        checkPaperId: 0,
        companyId: 0, //检查企业
        executorId: 0, //检查负责人
        id: null,

        persons: '', //专家
        companyPersons: '', //企业人员
        planId: 0,
        result: 1,
        score: null,
        targetId: 0, //检查对象
        taskId: '', //任务id

        listAnswer: [],
        listCheckComment: [],
        listCheckIndicatorId: [],
        listDetailId: [],
        listScore: []
      },
      noPlan: {
        companyId: 0,
        executorId: 0,
        targetId: 0
      },
      primaryShwo: false,
      lable: '1',
      dialogFormVisible: false, //是否显示检查表弹框
      dialogBeginCheckVisible: false, //是否显示开始检查弹框
      dialogEndCheckVisible: false, //是否显示结束检查弹框
      dialogAddTroubleVisible: false, //是否显示新增隐患
      dialogFormWatchVisible: false, //是否显示查看检查表
      treeDataList: {},
      taskDetailData: {},
      ddlTarget: [], //检查目标
      targetVal: '',
      ddlCompany: [], //公司
      companyVal: '',
      ddlExecuteState: [], //任务状态
      executeStateVal: '',
      ddlExecutor: [], //执行人
      executorVal: '',
      userId: this.$store.getters.userId,
      caogaoInfo: {
        draftCount: 0,
        totleCount: 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    watchPic(url) {
      window.open(url)
    },
    // 上传之前的格式设置
    beforeAvatarUpload(file) {
      //图片上传前图片大小和类型判断
      // const isImg = file.type === 'image/jpeg' || 'image/jpg' || 'image/png'
      // const isSize = file.size / 1024 / 1024 / 5 < 1
      // if (!isImg) {
      //   this.$message.error('上传文件只能是图片格式！')
      // }
      // if (!isSize) {
      //   this.$message.error('上传图片不能超过1MB！')
      // }
      // return isSize
    },
    httpRequest(data) {
      this.endCheckInfo.fileList.push(data.file)
      // console.log('httprequest', data, this.endCheckInfo.fileList)
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList, this.endCheckInfo.fileList)
      this.endCheckInfo.fileList.forEach((f, i) => {
        if (f.uid == file.uid) {
          this.endCheckInfo.fileList.splice(i, 1)
        }
      })
    },
    //新增隐患
    addTrouble(taskId, companyId) {
      this.dialogAddTroubleVisible = true
      this.currentTaskId = taskId
      this.currentCompanyId = companyId
    },
    //保存结束检查信息
    saveEndCheckInfo() {
      this.$refs.endCheckInfo.validate((valid) => {
        if (valid) {
          const formData = new FormData()
          formData.append('id', this.endCheckInfo.taskId)
          formData.append('overPersons', this.endCheckInfo.overPersons)
          formData.append(
            'overCompanyPersons',
            this.endCheckInfo.overCompanyPersons
          )
          formData.append('taskOpinion', this.endCheckInfo.taskOpinion)
          formData.append('realOverDate', this.endCheckInfo.realOverDate)
          this.endCheckInfo.fileList.forEach((file) => {
            formData.append('files', file, file.name)
          })
          saveEndCheck({ formData }).then((res) => {
            if (res.success) {
              this.$notify({
                title: '成功',
                message: '保存检查结果成功',
                type: 'success',
                duration: 2000
              })
              this.dialogEndCheckVisible = false
              this.getList()
            } else {
              this.$notify({
                title: '失败',
                message: '保存检查结果失败',
                type: 'error',
                duration: 2000
              })
            }
          })
        } else {
          this.$notify({
            title: '失败',
            message: '验证失败',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    },
    //保存开始检查信息
    saveBeginCheckInfo() {
      saveBeginCheck({
        id: this.beginCheckInfo.taskId,
        persons: this.beginCheckInfo.persons,
        startCompanyPersons: this.beginCheckInfo.startCompanyPersons,
        realStartDate: this.beginCheckInfo.realStartDate
      }).then((res) => {
        if (res.success) {
          this.$notify({
            title: '成功',
            message: '开始检查信息录入成功',
            type: 'success',
            duration: 2000
          })
          this.dialogBeginCheckVisible = false
          this.getList()
        } else {
          this.$notify({
            title: '失败',
            message: '开始检查信息录入失败',
            type: 'error',
            duration: 2000
          })
        }
      })
    },
    getList() {
      // this.listQuery.executorId = this.$store.getters.userId
      this.listLoading = true
      fetchTaskList(this.listQuery).then((response) => {
        this.list = response.data.list.records
        this.ddlTarget = response.data.ddlTarget //目标
        this.ddlCompany = response.data.ddlCompany //公司
        this.ddlExecuteState = response.data.ddlTaskState //任务
        this.ddlExecutor = response.data.ddlExecutor //检查人
        console.log(response.data)
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    //查询
    queryList() {
      this.listLoading = true
      console.log(this.listQuery)
      if (this.targetVal) {
        this.listQuery.targetId = this.targetVal
      }
      if (this.companyVal) {
        this.listQuery.companyId = this.companyVal
      }
      if (this.executeStateVal) {
        this.listQuery.taskState = this.executeStateVal
      }
      fetchTaskList(this.listQuery).then((response) => {
        this.list = response.data.list.records
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    // 开始检查
    startCheck(taskId) {
      // this.checkInfo.persons = ''
      this.primaryShwo = false
      // this.checkTitle = '开始检查'
      beginCheckInfo(taskId).then((response) => {
        this.dialogBeginCheckVisible = true
        this.beginCheckInfo.targetName = response.data.targetName
        this.beginCheckInfo.checkPaperName = response.data.checkPaperName
        this.beginCheckInfo.checkPaperId = response.data.checkPaperId
        this.beginCheckInfo.companyId = response.data.companyId
        this.beginCheckInfo.companyName = response.data.companyName
        this.beginCheckInfo.executorId = response.data.executorId
        this.beginCheckInfo.executorName = response.data.executorName
        this.beginCheckInfo.planName = response.data.planName
        this.beginCheckInfo.planId = response.data.planId
        this.beginCheckInfo.targetId = response.data.targetId
        this.beginCheckInfo.taskName = response.data.taskName
        this.beginCheckInfo.taskId = response.data.taskId
        this.beginCheckInfo.startCompanyPersons =
          response.data.startCompanyPersons
      })
    },
    //在查看完隐患草稿提示信息后，进入结束检查对话框
    gotoCheck() {
      this.dialogCaogaoInfoVisible = false
      this.endCheck(this.currentTaskId)
    },
    //判断是否有隐患草稿
    async caogaoInfoOver(taskId) {
      this.currentTaskId = taskId
      let response = await fetchDangerInfoBeforeDoTaskEnd(taskId)
      this.caogaoInfo = response.data
      console.log('this.caogaoInfo', this.caogaoInfo)

      if (Number(this.caogaoInfo.draftCount) != 0) {
        //如果有隐患草稿，先显示相关隐藏草稿的提示信息
        this.dialogCaogaoInfoVisible = true
      } else {
        //如果没有，直接显示结束检查对话框
        this.endCheck(taskId)
      }
    },
    //结束检查
    endCheck(taskId) {
      this.primaryShwo = false

      endCheckInfo(taskId).then((response) => {
        this.endCheckInfo.targetName = response.data.targetName
        this.endCheckInfo.checkPaperName = response.data.checkPaperName
        this.endCheckInfo.checkPaperId = response.data.checkPaperId
        this.endCheckInfo.companyId = response.data.companyId
        this.endCheckInfo.companyName = response.data.companyName
        this.endCheckInfo.executorId = response.data.executorId
        this.endCheckInfo.executorName = response.data.executorName
        this.endCheckInfo.planName = response.data.planName
        this.endCheckInfo.planId = response.data.planId
        this.endCheckInfo.targetId = response.data.targetId
        this.endCheckInfo.taskName = response.data.taskName
        this.endCheckInfo.taskId = response.data.taskId
        this.endCheckInfo.overPersons = response.data.overPersons
        this.endCheckInfo.overCompanyPersons = response.data.overCompanyPersons
        this.dialogEndCheckVisible = true
      })
    },
    // 检查表录入
    checkFormSave(taskId) {
      this.saveList.persons = ''
      this.primaryShwo = false
      fetchTaskCheckForm(taskId).then((response) => {
        this.treeDataList = response.data
        // console.log('this.treeDataList')
        // console.log(this.treeDataList)
        this.dialogFormVisible = true
        this.saveList.persons = this.treeDataList.persons
        this.saveList.companyPersons = this.treeDataList.companyPersons
        this.saveList.checkPaperId = this.treeDataList.checkPaperId
        this.saveList.companyId = this.treeDataList.companyId
        this.saveList.executorId = this.treeDataList.executorId
        this.saveList.planId = this.treeDataList.planId
        this.saveList.targetId = this.treeDataList.targetId
        this.saveList.taskId = this.treeDataList.taskId
      })
    },
    // 查看检查
    seeDetail(id) {
      // this.saveList.persons = ''
      this.primaryShwo = true
      // this.checkTitle = '查看检查'
      fetchDetails(id).then((response) => {
        this.taskDetailData = response.data
        this.dialogFormWatchVisible = true
        // this.saveList.persons = this.treeDataList.persons
        // console.log('this.taskDetailData',this.taskDetailData)
      })
    },
    chooseSelected(item, index) {
      item.items[index].selected = false
    },
    sbumit() {
      var heg = 1
      var index = 0
      ;(this.saveList.listCheckComment = []),
        (this.saveList.listCheckIndicatorId = []),
        (this.saveList.listDetailId = []),
        (this.saveList.listAnswer = []),
        (this.saveList.listScore = []),
        this.treeDataList.treeData.forEach((item) => {
          if (item.leaf) {
            if (item.items[0].selected) {
              this.saveList.listCheckComment.push('')
              this.saveList.listCheckIndicatorId.push(item.id),
                this.saveList.listDetailId.push(null),
                this.saveList.listAnswer.push(item.items[0].value),
                this.saveList.listScore.push(null)
            } else if (item.items[1].selected) {
              heg = 2
              this.saveList.listCheckComment.push(item.checkComment)
              this.saveList.listCheckIndicatorId.push(item.id),
                this.saveList.listDetailId.push(null),
                this.saveList.listAnswer.push(item.items[1].value),
                this.saveList.listScore.push(null)
            } else {
              index = 1
            }
          }
        })
      if (index) {
        // return alert('请全部检查完整')
        this.$notify({
          title: '检查结果',
          message: '请全部检查完整',
          type: 'warning',
          duration: 2000
        })
      }
      this.saveList.result = heg
      // console.log(this.saveList)
      fetchSave(this.saveList).then(
        (response) => {
          this.treeDataList = response.data
          this.dialogFormVisible = false
          // console.log(response)
          // alert('提交成功')
          this.$notify({
            title: '提交成功',
            message: '检查表检查录入成功',
            type: 'success',
            duration: 2000
          })
        },
        (res) => {
          // console.log(res)
          // alert('提交失败')
          this.$notify({
            title: '提交失败',
            message: '检查表检查录入失败',
            type: 'error',
            duration: 2000
          })
        }
      )
    }
  }
}
</script>

<style scoped  lang="scss" >
.app-container /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
/deep/ .el-row {
  line-height: 30px;
}
/deep/ .el-dialog {
  margin: 0 auto;
  width: 55%;
}
/deep/ .el-dialog__body {
  padding: 0 20px;
}
.treeDataL:last-child {
  margin-bottom: 20px;
}
.app-container /deep/ .el-dialog__header {
  text-align: center;
  padding-top: 40px;
}
.app-container /deep/ .pagination-container {
  margin-top: 0;
  padding: 16px 16px;
}
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.fieldInfo {
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 20px;
  legend {
    color: #666;
  }
}
</style>
